<nz-spin [nzSpinning]="dataOnLoading" nzTip="Loading...">
  <div class="d-flex s-container">
    <div class="d-flex justify-content-center width-100">
      <div class="d-flex">
        <div class="s-left">
          <div class="d-flex">
            <button (click)="onClickCreateMenu()" nz-button nzBlock nzType="default">创建菜单</button>
            <button (click)="refresh()" nz-button nzType="primary">
              <i nz-icon nzType="sync"></i>
            </button>
          </div>
          <nz-tree (nzClick)="menuNodeOnClick($event)" [nzData]="menuTreeNodes" [nzTreeTemplate]="menuTreeNodeTemplate"
                   nzShowLine>
            <ng-template #menuTreeNodeTemplate let-node>
            <span [style.color]="menuSelectData.menu.id == node.key ? '#ff4d4f' : ''" class="point">
              <i [nzType]="node.icon" nz-icon nzTheme="outline"
                 style="padding-right: 5px"></i>
              <span style="padding-right: 8px">{{ node.title }}</span>
            </span>
            </ng-template>
          </nz-tree>
        </div>
        <div class="s-center d-flex flex-column">
          <div class="d-flex justify-content-between">
            <div></div>
            <div class="d-flex">
              <button (click)="edit()" nz-button nzBlock nzType="primary">保存</button>
              <button (click)="delete()" nz-button nzBlock nzType="danger">删除</button>
            </div>
          </div>
          <div class="menu-info">
            <div class="d-flex s-form-item">
              <div class="s-label">菜单名称：</div>
              <div class="s-value">
                <input [(ngModel)]="menuSelectData.menu.title" nz-input/>
              </div>
            </div>
            <div class="d-flex s-form-item">
              <div class="s-label">上级菜单：</div>
              <div class="s-value">
                <nz-tree-select [(ngModel)]="menuSelectData.menu.pid" [nzNodes]="_menuTreeNodes"
                                nzShowSearch
                                style="width: 100%">
                </nz-tree-select>
              </div>
            </div>
            <div class="d-flex s-form-item">
              <div class="s-label">地址：</div>
              <div class="s-value">
                <input [(ngModel)]="menuSelectData.menu.url" nz-input/>
              </div>
            </div>
            <div class="d-flex s-form-item">
              <div class="s-label">图标：</div>
              <div class="s-value">
                <input [(ngModel)]="menuSelectData.menu.icon" nz-input/>
                <small style="padding: 4px 0">
                  <a href="https://ng.ant.design/components/icon/zh" target="_blank">图标地址：https://ng.ant.design/components/icon/zh</a>
                </small>
              </div>
            </div>
            <div class="d-flex s-form-item">
              <div class="s-label">继承权限：</div>
              <div class="s-value">
                <nz-radio-group [(ngModel)]="menuSelectData.menu.inherit">
                  <label nz-radio nzValue="yes">是</label>
                  <label nz-radio nzValue="no">否</label>
                </nz-radio-group>
                <small class="d-block" style="padding: 4px 0">
                  <a target="_blank">是否继承父级菜单的权限</a>
                </small>
              </div>
            </div>
            <div class="d-flex s-form-item">
              <div class="s-label">排序：</div>
              <div class="s-value">
                <input [(ngModel)]="menuSelectData.menu.sortt" nz-input/>
              </div>
            </div>
            <div class="d-flex s-form-item">
              <div class="s-label">备注：</div>
              <div class="s-value">
                <textarea [(ngModel)]="menuSelectData.menu.description" nz-input rows="4"></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="s-right">
          <nz-alert [nzMessage]="nzMessageTemplate1" nzType="info">
            <ng-template #nzMessageTemplate1>
            <span>
              <i [style.color]="'#ff4d4f'" nz-icon nzTheme="outline" nzType="check-circle"></i>
              代表拥有查看菜单的权限，可以<code style="color: #1890ff">取消</code>权限
            </span>
            </ng-template>
          </nz-alert>
          <nz-alert [nzMessage]="nzMessageTemplate2" nzType="warning">
            <ng-template #nzMessageTemplate2>
            <span>
              <i nz-icon nzTheme="outline" nzType="check-circle"></i>
              代表没有查看菜单的权限，可以<code style="color: #1890ff">添加</code>权限
            </span>
            </ng-template>
          </nz-alert>
          <div class="d-flex">
            <div>菜单权限：</div>
            <div>
              <nz-tree #permissionTree [(nzExpandedKeys)]="permissionExpandedKeys"
                       [(nzSelectedKeys)]="permissionSelectedKeys"
                       [nzData]="permissionTreeNode"
                       [nzExpandAll]="'true'"
                       [nzTreeTemplate]="nzTreeTemplate"
                       nzMultiple>
              </nz-tree>
              <ng-template #nzTreeTemplate let-node>
                <span [style.color]="node.origin.permission ? '#ff4d4f' : ''" class="point">
                  <i (click)="expandedNode(node,$event)" [nzType]="node.icon" nz-icon nzTheme="outline"
                     style="padding-right: 5px"></i>
                  <span (click)="expandedNode(node,$event)"
                        style="padding-right: 8px">
                    {{ node.title }}
                  </span>
                  <i (click)="cancelPermission(node)" *ngIf="node.origin.permission"
                     nz-icon nz-tooltip nzTheme="outline"
                     nzTooltipPlacement="right" nzTooltipTitle="取消权限" nzType="check-circle"></i>
                  <i (click)="allowPermission(node)" *ngIf="!node.origin.permission"
                     nz-icon nz-tooltip nzTheme="outline"
                     nzTooltipPlacement="right" nzTooltipTitle="添加权限" nzType="check-circle"></i>
                </span>
              </ng-template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nz-spin>


<div (click)="previewPersonMenu()" class="setting-drawer__handle"
     nz-tooltip nzTooltipPlacement="left" nzTooltipTitle="预览用户菜单权限">
  <i [nzType]="'eye'" class="setting-drawer__handle-icon" nz-icon></i>
</div>

<nz-modal (nzOnCancel)="isMenuVisible = false" (nzOnOk)="handleModalOk()" [(nzVisible)]="isMenuVisible" nzTitle="创建菜单">
  <div class="d-flex create-item">
    <div class="label">菜单名称：</div>
    <div class="width-100">
      <input [(ngModel)]="createMenuData_title" nz-input/>
    </div>
  </div>
  <div class="d-flex create-item">
    <div class="label">上级菜单：</div>
    <div class="width-100">
      <nz-tree-select [(ngModel)]="createMenuData_pid" [nzNodes]="_menuTreeNodes"
                      class="width-100"
                      nzShowSearch>
      </nz-tree-select>
    </div>
  </div>
  <div class="d-flex create-item">
    <div class="label">地址：</div>
    <div class="width-100">
      <input [(ngModel)]="createMenuData_url" nz-input/>
    </div>
  </div>
  <div class="d-flex create-item">
    <div class="label">图标：</div>
    <div class="width-100">
      <input [(ngModel)]="createMenuData_icon" nz-input/>
      <small style="padding: 4px 0">
        <a href="https://ng.ant.design/components/icon/zh"
           target="_blank">图标地址：https://ng.ant.design/components/icon/zh</a>
      </small>
    </div>
  </div>
  <div class="d-flex s-form-item">
    <div class="s-label">继承权限：</div>
    <div class="s-value">
      <nz-radio-group [(ngModel)]="createMenuData_inherit">
        <label nz-radio nzValue="yes">是</label>
        <label nz-radio nzValue="no">否</label>
      </nz-radio-group>
      <small class="d-block" style="padding: 4px 0">
        <a target="_blank">是否继承父级菜单的权限</a>
      </small>
    </div>
  </div>
  <div class="d-flex create-item">
    <div class="label">排序：</div>
    <div class="width-100">
      <input [(ngModel)]="createMenuData_sortt" nz-input/>
    </div>
  </div>
  <div class="d-flex create-item">
    <div class="label">备注：</div>
    <div class="width-100">
      <textarea [(ngModel)]="createMenuData_description" nz-input rows="4"></textarea>
    </div>
  </div>
</nz-modal>
